<!-- 手术跟台采购需求单-验收-->
<template>
  <div class="operation-follow-up-check">
    <!-- 独立于全局状态之外,获取到的基本的静态数据 -->
    <div>
      <recordInfo
        :record-data="baseInfo.data"
        :record-form="baseInfo.form"/>
    </div>
    <div class="distribute-register-import-products">
      <el-container class="container-box">
        <div
          class="init-btn-part"
          v-show="threadStatus === 1">
          <el-button
            type="primary"
            @click.stop="batchImportProducts">
            <i class="el-icon-s-unfold" />
            导入配送明细
          </el-button>
          <el-button
            class="load-template-btn"
            type="text"
            @click="loadTemplate">下载导入模板.csv</el-button>
        </div>
        <div
          class="no-list-corver"
          v-show="threadStatus === 0">
          <p>因导入的数据量较大，平台需要一段时间进行读取，请您稍后通过“注册证管理-批量新增“列表进入查看导入情况。</p>
        </div>
        <div
          class="import-list"
          v-show="threadStatus === 2">
          <header class="header-form">
            <el-form
              :inline="true"
              :model="formData"
              class="formData-box">
              <div class="search-form-corver">
                <el-form-item label="产品名称（中）">
                  <el-input
                    v-model="formData.zhName"
                    placeholder="请输入" />
                </el-form-item>
                <el-form-item>
                  <el-button
                    :loading="searchLoading"
                    type="primary"
                    @click.stop="submitSearch"
                    :class="{'isAddWidth':searchLoading}"
                  >
                    <i
                      class="iconfont el-icon-search"
                      :class="{'isdisplay':searchLoading}" />
                    {{ searchLoading?'':'查询' }}
                  </el-button>
                  <el-button @click.stop="clearSearchData">
                    <i class="iconfont el-icon-refresh-right" />
                    重置
                  </el-button>
                </el-form-item>
              </div>
            </el-form>
          </header>
          <importInfomationList
            :columns="productsColumns"
            ref="importInfomationList"
            id-str="draftId"
            :is-static="false"
            :show-edit-btn="false"
            :selection="true"
            :delete-api="api.delete"
            :analysis-api="api.analysis"
            :correct-wrong-data="api.correctWrongData"
            @getPrdutsCtrLen="getPrdutsCtrLen"
            @uploadResult="uploadResult"
            :submit-loading="searchLoading"
          >
            <template v-slot:listInfos="slotProps">
              <p class="total-result-info">
                共
                <span class="total-text">{{ slotProps.resultInfo.total }}</span> 条数据，有
                <span class="edit-text">{{ slotProps.resultInfo.needEdit }}</span> 项识别错误，请确认
                修正。表格中若有重复的产品信息（产品名称+产品编码+货号），则未读取。
              </p>
            </template>
          </importInfomationList>
        </div>
        <upload-file-card
          :dialog-visible="loadFileData.upLoadFileVisible"
          @closeUploadFile="closeUploadFile"
          @submitReady="submitReady"
          @submitResult="submitResult"
          ref="uploadFileCardRef"
          :if-third="false"
          :up-load-label="loadFileData.upLoadLabel"
          :card-title="loadFileData.cardTitle"
          :upload-accept="loadFileData.upLoadAccept"
          :upload-api="loadFileData.upLoadUrl"
          :params="loadFileData.params"
        >
          <template v-slot:upLoadDesc>
            <div class="upLoadDesc">{{ loadFileData.limitInfo }}</div>
          </template>
        </upload-file-card>
      </el-container>
    </div>
  </div>
</template>
<script>
import recordInfo from '@/moduleComponents/common/detail/recordInfo'
import uploadFileCard from '@/moduleComponents/productManagement/upLoadFileCard/index.vue'
import importInfomationList from '@/moduleComponents/productManagement/importInfomationList/index.vue'
import ElEditable from '@components/el-editable/index.vue'
import { productsColumns, baseInfoFormMap } from './const.js'
import {
  factoryCerImportProducts, // 导入文件接口
  productDataGetThreadStatus, // 获取进程状态
  productDataCorrectWrongData, // 错误数据重新提交
  productDataProductDraftDataDelete, // 删除列表数据
  productDataProductDraftDataAnalysis, // 导入数据统计信息
  productDataDelAllProDraftData, // 取消
  productDataProductDraftDataQuery, // 草稿数据查询
  productDataImportProTemplate
} from '@const/productCenterApiV2'
import { importCertificateTemplate } from '@const/commonApi.js'
import { $loadModelFile } from '@const/loadFileOps.js'
export default {
  name: 'OperationFollowUpCheck',
  components: {
    uploadFileCard,
    importInfomationList,
    ElEditable,
    recordInfo
  },
  data () {
    return {
      baseInfo: {
        data: {
          a: '1231231231',
          b: '1231231231',
          c: '1231231231',
          d: '1231231231',
          e: '1231231231',
          f: '1231231231',
          g: '1231231231',
          h: '1231231231',
          i: '1231231231',
          j: '1231231231',
          k: '1231231231',
          l: '1231231231',
          m: '1231231231',
          n: '1231231231',
          o: '1231231231',
          p: '1231231231',
          q: '1231231231'
        },
        form: baseInfoFormMap
      },
      // 批量导入产品表头
      productsColumns,
      // 搜索部分表单内容
      formData: {
        zhName: ''
      },
      api: {
        delete: productDataProductDraftDataDelete,
        analysis: productDataProductDraftDataAnalysis,
        correctWrongData: productDataCorrectWrongData
      },
      // 上传组件更改的数据
      loadFileData: {
        // 组件的label名
        upLoadLabel: '批量上传',
        // 组件的标题
        cardTitle: '上传文件',
        // 是否显示组件
        upLoadFileVisible: false,
        // 上传产品列表的地址
        upLoadUrl: factoryCerImportProducts,
        // 上传文件的格式限制
        upLoadAccept: '.csv',
        // 限制信息
        limitInfo:
          '请下载模板表格填写后上传。每份文档限制1万条数据，仅支持csv格式',
        params: {
          registNo: ''
        }
      },
      // 需要根据这个length判断全局按钮的不同显示
      prdutsCtrLen: 0,
      // 从接口中获取的状态赋值
      // ("数据解析中", 0),("已完成", 1),("有未完成数据", 2)
      threadStatus: 0,
      searchLoading: false
    }
  },
  watch: {
    prdutsCtrLen: {
      handler (nv, ov) {
        this._initGlobalBtn()
      }
    }
  },
  methods: {
    // 上传文件组件部分

    submitReady () {
      this.getThreadStatus()
    },
    uploadResult () {
      this.getThreadStatus()
    },
    // 产品列表部分

    // 搜索事件
    submitSearch () {
      this.$refs.importInfomationList._getPrductsCntroList({
        method: 'post',
        url: productDataProductDraftDataQuery,
        data: this.formData
      })
    },
    // 清空表单事件
    clearSearchData () {
      this.formData = {
        rgstCode: '',
        zhName: ''
      }
    },
    // 查询当前导入文件是否解析完成的状态
    // 1-已完成，0-进行中
    getThreadStatus () {
      this.$axios({
        method: 'get',
        url: productDataGetThreadStatus
      })
        .then(res => {
          this.threadStatus = res.data.payload
          if (this.threadStatus === 2) {
            this.$refs.importInfomationList._getPrductsCntroList({
              method: 'post',
              url: productDataProductDraftDataQuery,
              data: this.formData
            })
          }
          // 若是解析中状态，则设置定时器，轮询接口状态。
          if (this.threadStatus === 0) {
            this.circleTimer = setTimeout(() => {
              this.getThreadStatus()
            }, 3000)
          }
          if (this.threadStatus === 1) this.prdutsCtrLen = 0
        })
        .finally(() => {})
    },
    // 关闭当前上传组件
    closeUploadFile () {
      this.loadFileData.upLoadFileVisible = false
    },
    // 弹出导入文件的组件|显示上传组件
    batchImportProducts () {
      this.loadFileData.upLoadFileVisible = true
    },
    // 下载模板
    loadTemplate () {
      this.$axios({
        method: 'get',
        url: productDataImportProTemplate
      }).then(res => {
        if (res.data.payload) window.open(res.data.payload)
      })
    },
    getPrdutsCtrLen (val) {
      this.prdutsCtrLen = val
      this._initGlobalBtn()
    },
    // 全局部分
    globalCancel () {
      this.$confirm('确定取消？取消后您所修改的信息将会丢失！', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.removeAllCertify()
      })
    },
    // 取消
    removeAllCertify () {
      this.$axios({
        method: 'delete',
        url: productDataDelAllProDraftData
      }).then(res => {
        if (res.data.code === '0') {
          this.getThreadStatus()
        }
      })
    },
    submitResult () {
      this.$refs.uploadFileCardRef.$refs.upload.submit()
    },
    // 全局的提交按钮，根据showPicPart也就是是否是显示图片列表来确定调取哪个组件的提交方法
    globalSubmit () {
      this.$confirm('确定提交您当前的修改么？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$refs.importInfomationList._submitResut()
        // 提交后清除本地缓存数据
        window.localStorage.removeItem('storageData')
      })
    },
    globalGoBack () {
      this.$router.go(-1)
    },
    _initGlobalBtn () {
      let obj = {}
      if (this.prdutsCtrLen > 0) {
        obj = {
          type: 'btn',
          arr: [
            {
              type: 'button',
              noReturn: true,
              val: '取消',
              handle: this.globalCancel
            },
            { type: 'primary', val: '提交', handle: this.globalSubmit }
          ]
        }
      } else {
        obj = {
          type: 'btn',
          arr: [
            { val: '返回', handle: this.globalGoBack }
          ]
        }
      }
      this.$store.commit('changeLayoutHandle', obj)
    },
    _initRegisterNo () {
      this.loadFileData.params.registNo = this.$route.query.registNo
    }
  },
  mounted () {
    this._initGlobalBtn()
    this.getThreadStatus()
    // 初始化注册证id
    this._initRegisterNo()
  }
}
</script>
<style lang="less">
@import '../m-front-common/pc/assets/var.less';
.operation-follow-up-check {
  display: flex;
  flex-direction: column;

  .distribute-register-import-products {
    flex: 1;

    .container-box {
      height: 100%;
    }

    .upLoadDesc {
      color: #9ca6c7;
      font-size: @defaultFontSize;
    }

    .total-result-info {
      height: 40px;
      line-height: 40px;
      background: rgba(238, 240, 245, 1);
      padding: 0 10px;
      box-sizing: border-box;

      .total-text {
        color: #2371c5;
      }

      .edit-text {
        color: #d85365;
      }
    }

    .search-form-corver {
      margin-top: 10px;
    }

    .import-list {
      width: 100%;
      height: 100%;
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .init-btn-part {
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: flex-start;
      margin-top: 10px;
    }
  }
}
</style>
